<template>
  <div>
    <div ref="photoBgRef" class="photoBgRef">
      <imageList class="image-list" ref="imageList"></imageList>
    </div>
  </div>
</template>

<script type="link">
import imageList from './model/imageList.vue'

import * as THREE from "three";
import BIRDS from "vanta/src/vanta.birds";
// import Fog from "vanta/src/vanta.fog";
// import WAVES from "vanta/src/vanta.waves";
// import Clouds from "vanta/src/vanta.clouds";
// import Clouds2 from "vanta/src/vanta.clouds2"; // 有问题
// import Globe from "vanta/src/vanta.globe";
// import Net from "vanta/src/vanta.net";
// import Cells from "vanta/src/vanta.cells";
// import Trunk from "vanta/src/vanta.trunk"; //不可用
// import Topology from "vanta/src/vanta.topology"; //不可用
// import Dots from "vanta/src/vanta.dots"; //不可用
// import Rings from "vanta/src/vanta.rings";
// import Halo from "vanta/src/vanta.halo";
export default {
  components: {
    imageList
  },
  data () {
    return {
      vantaEffect: null,
    };
  },
  mounted () {
    this.vantaEffect = BIRDS({
      el: this.$refs.photoBgRef,
      THREE: THREE,
      backgroundColor: 0xffffff
    });

    // 这里重新设置样式
    this.vantaEffect.setOptions({
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.0,
      minWidth: 200.0,
      skyColor: 0x91cde3,
      cloudColor: 0xc9c9d9,
      cloudShadowColor: 0x174b7d,
      sunColor: 0xe37f05,
      speed: 1.5,
    });
  },
  methods: {

  }
};
</script>
<style lang="scss" scoped>
.photoBgRef {
  height: calc(100vh - 100px);
  overflow: hidden;
}
.image-list {
  width: 1200px;
  margin: auto;
  height: 100%;
  overflow: auto;
}

.image-list::-webkit-scrollbar {
  display: none; /* 针对Webkit浏览器如Chrome和Safari */
}

.image-list {
  -ms-overflow-style: none; /* 针对IE和Edge */
  scrollbar-width: none; /* 针对Firefox */
}
</style>
